<template>
    <div id="container">
        <h1>医院及治疗资源概况</h1>
        <section class="mainbox">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>

            <!-- 上侧盒子 -->
            <div class="row">
                <div class="panel bar2">
                    <div id="main1" class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line2">
                    <div id="main2" class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
            </div>

            <!-- 下侧盒子 -->
            <div class="row2">
                <div class="panel bar">
                    <div id="main0" class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel bar">
                    <div id="main3" class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel bar">
                    <div id="word" class="chart">
                        <span class="iconfont icon-yiyuan">医院</span>
                        <div class="text">{{ this.showhosp.name }}</div>
                        <span class="iconfont icon-shouye">医师团队</span>
                        <div class="text">{{ this.showhosp.doctor }}</div>
                        <span class="iconfont icon-yiliaoshebei">科室资源</span>
                        <div class="text">{{ this.showhosp.bed }}</div>
                        <span class="iconfont icon-yewu-heji_keyanchengguo">科研成就</span>
                        <div class="text">{{ this.showhosp.accomplishment }}</div>
                    </div>
                    <div class="panel-footer"></div>
                </div>
            </div>
            
        </section>
    </div>
</template>

<script>
import * as echarts from "echarts";
import '@/assets/iconfont/resource/iconfont.css'
export default {
    name: "DataVision",
    data(){
        return {
            hosp:[
                {
                    name:"首都医科大学附属北京地坛医院",
                    doctor:"科主任赵红心主任医师为北京大学医学部教授、首都医科大学教授、博士研究生导师，是国内著名的艾滋病专家。全科有主任医师2名，副主任医师3名，主治医师3名，主管护师1名、护师14名。其中医学博士3名、医学硕士5名。",
                    bed:"额定住院病床数为44张（其中11张床设置在单人房间），病房设施完备，环境优美温馨。",
                    accomplishment:"同时有多个国际国际合作项目，与美国华盛顿大学合作研究的“抗病毒治疗依从性“项目在国际上已经发表多篇论文；与美国耶鲁大学的合作项目“女性感染者的自我管理”正在进行中，与美国圣地亚哥大学的合作项目“抗病毒治疗药物对神经认知的影响”正在进行中。在亚太地区的研究中，地坛医院是中国唯一合作单位，其数据库的建立和应用给了我们很多学习和交流的机会，研究的最终目的还是更好的服务临床，我们总结发表的“艾滋病机会性感染谱”是中国最大的研究人群，抗病毒治疗的病死率1.7/100人年，也可以看出地坛医院对艾滋病的诊治水平是国内、国际一流的。"
                },
                {
                    name:"首都医科大学附属北京佑安医院",
                    doctor:"科主任梁连春北京预防医学会感染分会常委、北京医学会感染分会委员、北京市优秀中青年医师、全国抗击新冠疫情先进个人、荣获“荣耀医者”、“北京榜样人物”。主任医师为共有医务人员40余人，主任医师4人，副主任医师2人，主治医师6人，博士4人，在读博士2人，硕士8人。",
                    bed:"科室设置包括病房（34张床位），监护室（6张床位），发热门诊、肠道门诊及呼吸门诊。",
                    accomplishment:"近年完成国家自然科学基金、北京自然科学基金、首医教改课题、药物临床观察研究等。参与国际、国家、省部级及国际合作课题近20余项。近5年，科室成员发表SCI研究论文10余篇，其中影响因子10分以上的文章3篇（1篇发表在NEJM上、1篇发表在STTT、1篇已被NSR接收）。"
                },
                {
                    name:"华中科技大学同济医学院附属协和医院",
                    doctor:"现有职工104人，其中医师33人，护士59人，医技教辅人员12人。教授、主任医师、主任技师11人，副教授、副主任医师、副主任技师、副主任护师12人。博士导师7人，硕士导师10人。",
                    bed:"感染科下设感染性疾病诊疗中心、人工肝治疗中心、感染性疾病与免疫研究所等。现有病房4层楼病房，设床位114张（含感染性疾病ICU病房），门诊包括肝病/感染专家门诊、肠道门诊及发热门诊、临床检测实验室、血液/结肠净化治疗室、肝穿操作室等。",
                    accomplishment:"我科一直重视将科学研究与临床实际相结合，在流行性出血热、病毒性肝炎、肝硬化、血吸虫病及发热伴血小板减少综合征等领域均处于国内领先水平。近年来获得国家自然科学基金、教育部博士点基金、国家重大基础研究项目（973项目）、国家传染病防治重大专项，以及湖北省卫生厅重点资助项目40余项，课题总经费达 1815万元。同时积极参与国际间的科研合作，获得科技部国际合作与交流专项、中德跨学科重大合作研究项目的资助，与德国科研机构联合开展多项研究工作。研究成果已获得省级、部级、国家级奖项共 17项。其中包括：卫生部科技进步一等奖 1项、三等奖 2项，国家教委科技进步二等奖、三等奖各 1项；省科技进步二等奖 2项、三等奖 10项。，出版专著4部，在国内外权威期刊发表高水平科研论文100余篇。"
                },
                {
                    name:"重庆医科大学附属第二医院",
                    doctor:"我科有教授7人，副教授7人，主任医师8人，副主任医师7人，博士25人，是一支经验丰富、技术精湛、训练有素的三级甲等医院医疗及护理队伍，能胜任传染病科各种疾病的诊疗及护理工作。",
                    bed:"随着重庆医科大学附属第二医院江南分院整体投入运行，感染及肝病中心楼投入使用，中心场地达2万㎡，共计床位237张。病房配备有人工肝治疗室、腹水浓缩回输室、Fibroscan（无创肝脏瞬时弹性检测仪）检查室、B超引导下肝穿活检室、胃镜室、肝炎病毒病原学检测实验室、重症监护室等。",
                    accomplishment:"科研成果丰硕，连续承担国家“六五”至“十三五”期间关于病毒性肝炎和其他传染性疾病及寄生虫病的重点攻关项目。近5年，承担传染病及相关领域国家重大科技专项7项，其他国家级科研项目48项，其中国家自然科学基金优秀青年科学家基金项目1项，重庆市科研项目近百项。近5年来团队成员在传染病相关领域国际主流期刊Nature Medicine、Gut、Hepatology、Journal of Hepatology、Journal of Infectious Diseases、Antiviral Research、J Clin Microbiol等发表高水平论文，影响因子大于5分SCI论文107篇，其中大于10分SCI论文10篇，最高影响因子36.13。申请专利15项。"
                },
                {
                    name:"吉林大学第一医院",
                    doctor:" 我科共有教授、副教授6人，博士生导师1人，硕士生导师5人，有博士学位4人，硕士学位12人，在读博士6人，技师1人，护士18人",
                    bed:"现拥有病房，床位51张，电诊室/ICU监护室，具有完善的诊断、治疗、危重症患者护理及抢救设备。我科的ICU病房配备齐全，有心电监护、血气分析仪、电除颤仪、有创呼吸机、无创呼吸机等设备配备，能完成各种危重症抢救治疗任务。我科与我院临床其他科室具有密切联系，在上消化道出血患者的介入及内镜下直视止血、肝癌的介入及超声刀治疗、肝移植、急性肾衰血液透析等方面，具有强大的医疗阵容及技术支持。",
                    accomplishment:"我科为我院I期药物临床试验基地，与正规国际制药公司联系密切，承担并圆满完成了多项全球性药品观察项目，在病毒性肝炎的规范治疗方面，具有世界一流的经验，并为广大肝病患者提供了接受世界先进药物治疗的机会。多名患者在这些活动中受益。我科尊重祖国传统医学，将其应用于临床，吸取前人经验，结合临床实际自创的灵丹胶囊、肝特灵胶囊、肝豆汤、脂肝合剂等药物通过临床验证，在治疗肝硬化、肝炎、肝豆状核变性、脂肪肝等方面，取得了良好的疗效。"
                },
                {
                    name:"安徽医科大学第一附属医院",
                    doctor:"学科拥有一批高素质人才，博士生导师2人，硕士生导师8人,博士9人,主任医师10人,副主任医师9人。在国内具有一定的学术影响，其中国家级学术委员会委员5人，省级学术委员会主委2人，副主委5人，国家级期刊副主编1人，编委5人。",
                    bed:"科室现设有临床（病房、门诊）、免疫学实验室、分子生物学实验室、安徽省细菌耐药监控中心等部门,开设的床位数、年门诊量、年出院人数和危重病例抢救成功率均居省内各医院同专业之首。",
                    accomplishment:"主持国家自然科学基金项目10项、省厅级科研基金项目10余项。先后获得省（部）级科技进步奖一等奖1项、二等奖3项、三等奖2项，中华医学科技奖二等奖1项和三等奖1项。学科带头人李家斌主任系“新世纪百千万人才工程”国家级人选,享受国务院特殊津贴。"
                },
                {
                    name:"中南大学湘雅医院",
                    doctor:"湘雅医院感染病科拥有一支技术精湛、医德高尚、治学严谨的医师队伍，在28名教职员中目前具有博士学位医师24人，硕士学位1人。有教授6人、副教授11人，主治医师6人，技术人员2人。其中高级职称医师17人，博士生导师4人，硕士生导师7人。",
                    bed:"学科设有两个专科病房（肝病病房、感染性疾病病房），病床数80张，年收治住院患者数量2000人次左右。门诊有肝病门诊、感染病门诊、发热门诊、肠道门诊、艾滋病门诊等，年门诊量达60000余人次。拥有感染病血液净化中心（如血浆置换、分子吸附再循环系统（MARS）、血液透析、持续血液滤过等）、感染病实验室、感染病肝脏纤维弹性无创检查室（Fibroscan）、感染病B超检查室。",
                    accomplishment:"该学科先后承担国家自然科学基金面上5项、青年基金2项；国家十一五重大专项课题2项、国家十二五重大专项课题3项、863课题1项、教育部博士点专项基金2项、教育部课题5项、卫生部课题6项、省科委重大项目2项、省级科研课题40余项，教改课题5项，总经费达1000万以上。每两年开展1次湖南省感染病学术会议、肝病学术会议1次。获国家专利2项，获卫生部科技进步三等奖1项，湖南省科技进步一等奖1项、二等奖6项、三等奖8项，湖南省医药卫生科技一等奖3项、二等奖6项、三等奖8项。"
                },
                {
                    name:"重庆医科大学附属第一医院",
                    doctor:"现有教授/主任医师共10名，研究员1名，副教授/副主任医师4名，专职B超医师2名，重庆市学术技术带头人2名，重庆市学术技术带头人后备人选1人，重庆市中青年医学高端人才2名，三分之二以上医生有海外学习或进修经历。",
                    bed:"感染科编制床位72张，分为感染一病区、感染二病区和肝病区。感染科附属传染病寄生虫病研究所，从80年代开展细菌耐药监测，强化细菌检测和耐药研究，指导区域性抗感染药物合理使用。仪器设备专业、齐全、先进。普通、超低温冰箱，一般培养箱和二氧化碳培养箱、普通和低温离心机、生物安全柜、超净工作台、制冰机、ATB鉴定仪、干燥箱、多功能读数仪等，能够满足临床和科研所需。",
                    accomplishment:"感染科是首批传染病学国家重点学科（全国仅2个）、感染性疾病分子生物学教育部重点实验室、首批传染病学硕士和博士授予点、首批抗感染和寄生虫药物临床药理研究基地以及西部地区首个传染病与寄生虫病研究所、国家感染病临床研究中心核心单位、中国医师协会“脂肪肝诊治中心”。连续入选复旦传染感染学科排行榜提名。在2019年度中国医院科技量值（STEM）排名第26名，位居重庆第一。2019中国医院影响力排行榜(感染病科)位居全国第五，重庆第一位。2022年中国医院感染病学科论文影响力排名第九。"
                },
                {
                    name:"深圳市第三人民医院",
                    doctor:"感染科技术力量雄厚，拥有医务人员27人，设科主任1人、护士长1人；全科主任医师1人，副主任医师1人，主治医师6人，主管护师9人。医生系列中博士1人，硕士5人，护士系列中本科13人，肝病专科护士1人。感染二科的队伍是一支学历高、素质好、作风严谨、经验丰富、技术过硬、爱岗敬业的医疗和护理团队。",
                    bed:"感染二科位于D栋感染病楼三楼，拥有病床数49张。作为国家重点感染病临床专科和深港传染病中心的感染二科，承担了深圳市及周边地区感染性疾病救治以及传染病防治的主要重任，尤其是在发热查因、皮疹查因、休克查因、昏迷查因等疑难危重疾病、各种复杂感染以及肠道、虫媒传染病（疟疾、登革热、立克次体病等）的诊断和救治方面有丰富的经验。",
                    accomplishment:"感染二科在医院领导的直接指导下，在抗击2020年突发的新型冠状病毒肺炎疫情中、SARS、危重流感和禽流感、重症手足口病、终末期肝病、重症疟疾、重症中枢神经系统感染、脓毒血症等感染性疾病中多次创造了“奇迹”。感染二科成功处置突发公共卫生事件和重大传染病防治方面的能力曾得到国家卫生部和广东省委主要领导的高度评价。"
                }
            ],
            showhosp:{
                    name:"首都医科大学附属北京地坛医院",
                    doctor:"科主任赵红心主任医师为北京大学医学部教授、首都医科大学教授、博士研究生导师，是国内著名的艾滋病专家。全科有主任医师2名，副主任医师3名，主治医师3名，主管护师1名、护师14名。其中医学博士3名、医学硕士5名。",
                    bed:"额定住院病床数为44张（其中11张床设置在单人房间），病房设施完备，环境优美温馨。",
                    accomplishment:"同时有多个国际国际合作项目，与美国华盛顿大学合作研究的“抗病毒治疗依从性“项目在国际上已经发表多篇论文；与美国耶鲁大学的合作项目“女性感染者的自我管理”正在进行中，与美国圣地亚哥大学的合作项目“抗病毒治疗药物对神经认知的影响”正在进行中。在亚太地区的研究中，地坛医院是中国唯一合作单位，其数据库的建立和应用给了我们很多学习和交流的机会，研究的最终目的还是更好的服务临床，我们总结发表的“艾滋病机会性感染谱”是中国最大的研究人群，抗病毒治疗的病死率1.7/100人年，也可以看出地坛医院对艾滋病的诊治水平是国内、国际一流的。"
                },
        }
    },
    mounted() {
        var myChart0 = echarts.init(document.getElementById("main0"));
        var option0 = {
            title: {
                text: '药物医疗导图',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 30,
                },
                left: 'center', // 设置标题水平居中
                top: '4%',
            },
            backgroundColor: new echarts.graphic.RadialGradient(0, 0, 0, [{
                offset: 0,
                color: '#f7f8fa'
            }, {
                offset: 1,
                color: '#fff'
            }]),
            tooltip: {},
            toolbox: {
                show: false,
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            animationDuration: 1800,
            animationEasingUpdate: 'quinticInOut',
            series: [{
                name: '传染病',
                type: 'graph',
                layout: 'force',

                force: {
                    //元素之间的间距
                    repulsion: 200
                },
                data: [
                    {
                        "name": "传染病",
                        "symbolSize": 70,
                        "category": "传染病",
                        "draggable": "true",
                        "value": 25
                    },
                    {
                        "name": "流感",
                        "symbolSize": 70,
                        "category": "流感",
                        "draggable": "true",
                        "value": 25
                    },
                    //流感
                    {
                        "name": "奥司他韦",
                        "symbolSize": 9,
                        "category": "奥司他韦",
                        "draggable": "true",
                        "value": "成人剂量每次 75mg，每日 2 次。1 岁以下儿童推荐剂量：0～8 月龄，每次 3.0 mg/kg，每日 2 次；9～11 月龄，每次 3.5mg/kg，每日 2 次"
                    },
                    {
                        "name": "扎那米韦",
                        "symbolSize": 24,
                        "category": "扎那米韦",
                        "draggable": "true",
                        "value": "适用于成人及 7 岁以上青少年，用法：每次 10mg，每天 2 次（间隔 12 小时），疗程 5 天。"

                    },
                    {
                        "name": "帕拉米韦",
                        "symbolSize": 27,
                        "category": "帕拉米韦",
                        "draggable": "true",
                        "value": "成人用量为 300～600mg，小于 30 天新生儿6mg/kg，31～90 天婴儿 8mg/kg，91 天～17 岁儿童 10mg/kg，静脉滴注，每日 1 次，1～5 天，"
                    },
                    {
                        "name": "阿比多尔",
                        "symbolSize": 30,
                        "category": "阿比多尔",
                        "draggable": "true",
                        "value": "用量为每次 200mg，每日 3 次，疗程 5 天。"
                    },
                    {
                        "name": "金刚烷胺和金刚乙胺",
                        "symbolSize": 30,
                        "category": "金刚烷胺和金刚乙胺",
                        "draggable": "true",
                        "value": "针对甲型流感病毒，但对目前流行的流感病毒株耐药，不建议使用。"
                    },
                    {
                        "name": "常规氧疗",
                        "symbolSize": 30,
                        "category": "常规氧疗",
                        "draggable": "true",
                        "value": ""
                    },
                    {
                        "name": "鼻导管高流量氧疗",
                        "symbolSize": 30,
                        "category": "鼻导管高流量氧疗",
                        "draggable": "true",
                        "value": ""
                    },
                    {
                        "name": "体外膜肺氧合",
                        "symbolSize": 30,
                        "category": "体外膜肺氧合",
                        "draggable": "true",
                        "value": ""
                    },
                    //二层
                    {
                        "name": "成人甲乙型流感",
                        "symbolSize": 30,
                        "category": "成人甲乙型流感",
                        "draggable": "true",
                        "value": 25

                    },
                    {
                        "name": "甲型流感病毒",
                        "symbolSize": 50,
                        "category": "甲型流感病毒",
                        "draggable": "true",
                        "value": 51

                    },
                    {
                        "name": "重症患者（低氧血症）",
                        "symbolSize": 60,
                        "category": "重症患者（低氧血症）",
                        "draggable": "true",
                        "value": 62

                    },
                    {
                        "name": "全年龄段甲乙型流感",
                        "symbolSize": 60,
                        "category": "全年龄段甲乙型流感",
                        "draggable": "true",
                        "value": 100

                    },

                    {
                        "name": "手足口病",
                        "symbolSize": 70,
                        "category": "手足口病",
                        "draggable": "true",
                        "value": 25
                    },
                    //手足口病
                    {
                        "name": "布洛芬口服",
                        "symbolSize": 9,
                        "category": "布洛芬口服",
                        "draggable": "true",
                        "value": "5～10mg/（kg·次）两次用药的最短间隔时间为6小时"
                    },
                    {
                        "name": "对乙酰氨基酚口服",
                        "symbolSize": 9,
                        "category": "对乙酰氨基酚口服",
                        "draggable": "true",
                        "value": "10～15mg/（kg·次)两次用药的最短间隔时间为6小时"
                    },
                    {
                        "name": "咪达唑仑肌肉注射",
                        "symbolSize": 27,
                        "category": "咪达唑仑肌肉注射",
                        "draggable": "true",
                        "value": "无静脉通路可首选,0.1～0.3mg/（kg·次)，体重＜40kg者，最大剂量不超过5mg/次，体重＞40kg者，最大剂量不超过10mg/次"
                    },
                    {
                        "name": "地西泮缓慢静脉注射",
                        "symbolSize": 30,
                        "category": "地西泮缓慢静脉注射",
                        "draggable": "true",
                        "value": "0.3～0.5mg/（kg·次)，最大剂量不超过10mg/次，注射速度1～2mg/min"
                    },
                    {
                        "name": "水合氯醛",
                        "symbolSize": 30,
                        "category": "水合氯醛",
                        "draggable": "true",
                        "value": "灌肠疗法"
                    },
                    {
                        "name": "控制液体入量",
                        "symbolSize": 30,
                        "category": "控制液体入量",
                        "draggable": "true",
                        "value": "给予生理需要量60～80ml/（kg·d）（脱水剂不计算在内），建议匀速给予，即2.5～3.3ml/（kg·h）"
                    },
                    {
                        "name": "应用血管活性药物",
                        "symbolSize": 30,
                        "category": "应用血管活性药物",
                        "draggable": "true",
                        "value": "同时，给予生理盐水5～10ml/（kg·次）进行液体复苏，15～30分钟内输入，此后酌情补液，避免短期内大量扩容"
                    },
                    {
                        "name": "甘露醇",
                        "symbolSize": 30,
                        "category": "甘露醇",
                        "draggable": "true",
                        "value": "剂量为20%甘露醇0.25～1.0g/（kg·次），每4～8小时1次，20～30min快速静脉注射；严重颅内高压或脑疝时，可增加频次至每2～4小时1次。"
                    },
                    {
                        "name": "高渗盐水（3%氯化钠）",
                        "symbolSize": 30,
                        "category": "高渗盐水（3%氯化钠）",
                        "draggable": "true",
                        "value": "严重颅内高压或低钠血症患儿可考虑"
                    },
                    {
                        "name": "呋塞米",
                        "symbolSize": 30,
                        "category": "呋塞米",
                        "draggable": "true",
                        "value": "有心功能障碍者，可考虑，1～2mg/kg静脉注射"
                    },
                    {
                        "name": "甲基泼尼松龙",
                        "symbolSize": 30,
                        "category": "甲基泼尼松龙",
                        "draggable": "true",
                        "value": "1～2mg/（kg·d）"
                    },
                    {
                        "name": "地塞米松",
                        "symbolSize": 30,
                        "category": "地塞米松",
                        "draggable": "true",
                        "value": "0.2～0.5mg/（kg·d）"
                    },
                    {
                        "name": "氢化可的松",
                        "symbolSize": 30,
                        "category": "氢化可的松",
                        "draggable": "true",
                        "value": "3～5mg/（kg·d）"
                    },
                    //二层
                    {
                        "name": "高温症状",
                        "symbolSize": 30,
                        "category": "高温症状",
                        "draggable": "true",
                        "value": 25

                    },
                    {
                        "name": "惊厥症状",
                        "symbolSize": 50,
                        "category": "惊厥症状",
                        "draggable": "true",
                        "value": 51

                    },
                    {
                        "name": "重症（器官水肿、休克）",
                        "symbolSize": 60,
                        "category": "重症（器官水肿、休克）",
                        "draggable": "true",
                        "value": 62

                    },
                    {
                        "name": "颅内高压",
                        "symbolSize": 60,
                        "category": "颅内高压",
                        "draggable": "true",
                        "value": 100

                    },
                    {
                        "name": "脑脊髓炎和持续高热等症状",
                        "symbolSize": 60,
                        "category": "脑脊髓炎和持续高热等症状",
                        "draggable": "true",
                        "value": 100
                    },

                    {
                        "name": "猩红热",
                        "symbolSize": 70,
                        "category": "猩红热",
                        "draggable": "true",
                        "value": 25
                    },
                    //猩红热
                    {
                        "name": "阿莫西林",
                        "symbolSize": 9,
                        "category": "阿莫西林",
                        "draggable": "true",
                        "value": "儿童 50mg/(kg·d)，最大剂量1000mg /d，分 3 次，8 小时 1 次，成人 500mg/次，2 次/天，口服"
                    },
                    {
                        "name": "青霉素G",
                        "symbolSize": 9,
                        "category": "青霉素G",
                        "draggable": "true",
                        "value": "儿童 4 万~8 万 U/(kg·d)，分 2 次，12 小时1 次，成人 120~240 万 U/次，2~3 次/天，肌内注射。疗程为7~10 天"
                    },
                    {
                        "name": "头孢羟氨苄",
                        "symbolSize": 27,
                        "category": "头孢羟氨苄",
                        "draggable": "true",
                        "value": "儿童 30mg/(kg·d)，12 小时 1 次；成人 1g/次，一天 1 次，口服"
                    },
                    {
                        "name": "头孢呋辛酯",
                        "symbolSize": 30,
                        "category": "头孢呋辛酯",
                        "draggable": "true",
                        "value": "儿童 20~30mg/(kg·d)，12 小时 1 次；成人 250mg/次，12 小时 1 次，口服"
                    },
                    {
                        "name": "红霉素",
                        "symbolSize": 30,
                        "category": "红霉素",
                        "draggable": "true",
                        "value": "儿童 30~40mg/(kg·d)，分 4 次，6小时 1 次；成人 1~2g/d，分 3 次，8 小时 1 次，口服。疗程7~10 天"
                    },
                    {
                        "name": "解肌透痧汤",
                        "symbolSize": 30,
                        "category": "解肌透痧汤",
                        "draggable": "true",
                        "value": "每日 1 剂，水煎服，每次 100~200ml，每日 2~4次，口服。"
                    },
                    {
                        "name": "凉营清气汤",
                        "symbolSize": 30,
                        "category": "凉营清气汤",
                        "draggable": "true",
                        "value": "每日 1 剂，水煎服，每次 100~200ml，每日 2~4次，口服。推荐中成药：喜炎平注射液、血必净注射液。"
                    },
                    {
                        "name": "沙参麦冬汤",
                        "symbolSize": 30,
                        "category": "沙参麦冬汤",
                        "draggable": "true",
                        "value": "每日 1 剂，水煎服，每次 100~200ml，每日 2~4次，口服。"
                    },
                    //二层
                    {
                        "name": "病原治疗",
                        "symbolSize": 30,
                        "category": "病原治疗",
                        "draggable": "true",
                        "value": 25
                    },
                    {
                        "name": "中医治疗（普通型）",
                        "symbolSize": 50,
                        "category": "中医治疗（普通型）",
                        "draggable": "true",
                        "value": "临床表现：起病急骤，继而高热头痛，恶寒，面赤，咽喉红肿疼痛，影响吞咽，皮肤潮红，丹痧隐隐，或伴呕吐、腹痛，舌红，苔薄白或薄黄，脉浮数有力。"
                    },
                    {
                        "name": "中医治疗（重型）",
                        "symbolSize": 60,
                        "category": "中医治疗（重型）",
                        "draggable": "true",
                        "value": "临床表现：壮热不退，烦渴面赤，皮疹密集成片，为细小丘疹，色红如丹，或见出血点或紫斑，皮疹自颈、腋下、腹股沟等处开始，继而遍布全身，压之褪色，咽喉红肿赤烂，伴有糜烂白腐，严重者烦躁谵妄或神昏抽搐，见疹后 1~2 天舌质红绛起刺，3~4 天后舌苔剥脱，舌面光红起刺，脉数而有力。"
                    },
                    {
                        "name": "中医治疗（恢复期）",
                        "symbolSize": 60,
                        "category": "中医治疗（恢复期）",
                        "draggable": "true",
                        "value": "临床表现：痧疹布齐 1~2 天后，体温逐渐下降，后可呈现低热，咽喉糜烂疼痛减轻，虚烦口干，或干咳少痰，夜间盗汗，食欲不振，大便偏干，皮疹消退后出现脱屑、脱皮，皮肤干燥，舌红少津，苔少，或光剥无苔，脉象细数。"
                    },
                    ],
                links: [
                    {
                        "source": "传染病",
                        "target": "流感"
                    },
                    {
                        "source": "传染病",
                        "target": "手足口病"
                    },
                    {
                        "source": "传染病",
                        "target": "猩红热"
                    },
                    //流感
                    {
                        "source": "流感",
                        "target": "全年龄段甲乙型流感"
                    },
                    {
                        "source": "流感",
                        "target": "成人甲乙型流感"
                    },
                    {
                        "source": "流感",
                        "target": "甲型流感病毒"
                    },
                    {
                        "source": "流感",
                        "target": "重症患者（低氧血症）"
                    },
                    {
                        "source": "全年龄段甲乙型流感",
                        "target": "奥司他韦"
                    },
                    {
                        "source": "全年龄段甲乙型流感",
                        "target": "扎那米韦"
                    },
                    {
                        "source": "全年龄段甲乙型流感",
                        "target": "帕拉米韦"
                    },
                    {
                        "source": "成人甲乙型流感",
                        "target": "阿比多尔"
                    },
                    {
                        "source": "甲型流感病毒",
                        "target": "金刚烷胺和金刚乙胺"
                    },
                    {
                        "source": "重症患者（低氧血症）",
                        "target": "常规氧疗"
                    },
                    {
                        "source": "重症患者（低氧血症）",
                        "target": "鼻导管高流量氧疗"
                    },
                    {
                        "source": "重症患者（低氧血症）",
                        "target": "体外膜肺氧合"
                    },
                    //手足口病
                    {
                        "source": "手足口病",
                        "target": "高温症状"
                    },
                    {
                        "source": "手足口病",
                        "target": "惊厥症状"
                    },
                    {
                        "source": "手足口病",
                        "target": "重症（器官水肿、休克）"
                    },
                    {
                        "source": "手足口病",
                        "target": "颅内高压"
                    },
                    {
                        "source": "手足口病",
                        "target": "脑脊髓炎和持续高热等症状"
                    },
                    {
                        "source": "高温症状",
                        "target": "布洛芬口服"
                    },
                    {
                        "source": "高温症状",
                        "target": "对乙酰氨基酚口服"
                    },
                    {
                        "source": "惊厥症状",
                        "target": "咪达唑仑肌肉注射"
                    },
                    {
                        "source": "惊厥症状",
                        "target": "地西泮缓慢静脉注射"
                    },
                    {
                        "source": "惊厥症状",
                        "target": "水合氯醛"
                    },
                    {
                        "source": "重症（器官水肿、休克）",
                        "target": "控制液体入量"
                    },
                    {
                        "source": "重症（器官水肿、休克）",
                        "target": "应用血管活性药物"
                    },
                    {
                        "source": "颅内高压",
                        "target": "甘露醇"
                    },
                    {
                        "source": "颅内高压",
                        "target": "高渗盐水（3%氯化钠）"
                    },
                    {
                        "source": "颅内高压",
                        "target": "呋塞米"
                    },
                    {
                        "source": "脑脊髓炎和持续高热等症状",
                        "target": "甲基泼尼松龙"
                    },
                    {
                        "source": "脑脊髓炎和持续高热等症状",
                        "target": "地塞米松"
                    },
                    {
                        "source": "脑脊髓炎和持续高热等症状",
                        "target": "氢化可的松"
                    },
                    //猩红热
                    {
                        "source": "猩红热",
                        "target": "病原治疗"
                    },
                    {
                        "source": "猩红热",
                        "target": "中医治疗（普通型）"
                    },
                    {
                        "source": "猩红热",
                        "target": "中医治疗（重型）"
                    },
                    {
                        "source": "猩红热",
                        "target": "中医治疗（恢复期）"
                    },
                    {
                        "source": "病原治疗",
                        "target": "阿莫西林"
                    },
                    {
                        "source": "病原治疗",
                        "target": "青霉素G"
                    },
                    {
                        "source": "病原治疗",
                        "target": "头孢羟氨苄"
                    },
                    {
                        "source": "病原治疗",
                        "target": "头孢呋辛酯"
                    },
                    {
                        "source": "病原治疗",
                        "target": "红霉素"
                    },
                    {
                        "source": "中医治疗（普通型）",
                        "target": "解肌透痧汤"
                    },
                    {
                        "source": "中医治疗（重型）",
                        "target": "凉营清气汤"
                    },
                    {
                        "source": "中医治疗（恢复期）",
                        "target": "沙参麦冬汤"
                    },
                ],
                // 二级配色数据
                categories: [
                {
                    'name': '传染病'
                },
                //流感
                {
                    'name': '流感'
                },
                {
                    'name': '奥司他韦'
                },
                {
                    'name': '扎那米韦'
                },
                {
                    'name': '帕拉米韦'
                },
                {
                    'name': '阿比多尔'
                },
                {
                    'name': '金刚烷胺和金刚乙胺'
                },
                {
                    'name': '常规氧疗'
                },
                {
                    'name': '鼻导管高流量氧疗'
                },
                {
                    'name': '体外膜肺氧合'
                },
                {
                    'name': '全年龄段甲乙型流感'
                },
                {
                    'name': '成人甲乙型流感'
                },
                {
                    'name': '甲型流感病毒'
                },
                {
                    'name': '重症患者（低氧血症）'
                },
                //手足口病
                {
                    'name': '手足口病'
                },
                {
                    'name': '布洛芬口服'
                },
                {
                    'name': '对乙酰氨基酚口服'
                },
                {
                    'name': '咪达唑仑肌肉注射'
                },
                {
                    'name': '地西泮缓慢静脉注射'
                },
                {
                    'name': '水合氯醛'
                },
                {
                    'name': '控制液体入量'
                },
                {
                    'name': '应用血管活性药物'
                },
                {
                    'name': '甘露醇'
                },
                {
                    'name': '高渗盐水（3%氯化钠）'
                },
                {
                    'name': '呋塞米'
                },
                {
                    'name': '甲基泼尼松龙'
                },
                {
                    'name': '地塞米松'
                },
                {
                    'name': '氢化可的松'
                },
                {
                    'name': '高温症状'
                },
                {
                    'name': '惊厥症状'
                },
                {
                    'name': '重症（器官水肿、休克）'
                },
                {
                    'name': '颅内高压'
                },
                {
                    'name': '脑脊髓炎和持续高热等症状'
                },
                //猩红热
                {
                    'name': '猩红热'
                },
                {
                    'name': '阿莫西林'
                },
                {
                    'name': '青霉素G'
                },
                {
                    'name': '头孢羟氨苄'
                },
                {
                    'name': '头孢呋辛酯'
                },
                {
                    'name': '红霉素'
                },
                {
                    'name': '解肌透痧汤'
                },
                {
                    'name': '凉营清气汤'
                },
                {
                    'name': '沙参麦冬汤'
                },
                {
                    'name': '病原治疗'
                },
                {
                    'name': '中医治疗（普通型）'
                },
                {
                    'name': '中医治疗（重型）'
                },
                {
                    'name': '中医治疗（恢复期）'
                }],
                focusNodeAdjacency: true,
                //只能缩放
                roam: "scale",
                //标签
                label: {
                    normal: {
                        show: true,
                        //定位上方
                        position: 'center',
                        //字体设置
                        textStyle: {
                            color: "white"
                            // fontWeight: "bold"
                        }

                    }

                },
                //连接线的配置
                lineStyle: {
                    width: 10,
                    normal: {
                        color: 'source',
                        curveness: 0,
                        width: 3,
                        type: "solid"
                    }
                },
                //圆盘颜色
                color: ['#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#cfb850', '#4ee0d7', '#e3698c', '#eca389', '#6939e4', '#9f73c7', '#6056e9', '#c97648', '#0d5d64']
                // 6056e9
                // color: []
            }]
        };
        myChart0.setOption(option0);

        //各地区疾控中心达标指数
        var myChart1 = echarts.init(document.getElementById("main1"));
        const baseData = [
            {
                value: "华东地区",
                children: [
                    { value: "上海", num: 0.1 },
                    { value: "江苏", num: 0.15 },
                    { value: "浙江", num: 0.18 },
                    { value: "安徽", num: 0.18 },
                    { value: "福建", num: 0.18 },
                    { value: "江西", num: 0.18 },
                    { value: "山东", num: 0.18 },
                    { value: "台湾", num: 0.18 },
                ],
            },
            {
                value: "华南地区",
                children: [
                    { value: "广东", num: 0.25 },
                    { value: "广西", num: 0.23 },
                    { value: "海南", num: 0.23 },
                    { value: "香港", num: 0.23 },
                    { value: "澳门", num: 0.23 },
                ],
            },
            {
                value: "华北地区",
                children: [
                    { value: "北京", num: 0.32 },
                    { value: "天津", num: 0.33 },
                    { value: "河北", num: 0.36 },
                    { value: "山西", num: 0.36 },
                    { value: "内蒙古", num: 0.36 },
                ],
            },
            {
                value: "华中地区",
                children: [
                    { value: "河南", num: 0.57 },
                    { value: "湖北", num: 0.72 },
                    { value: "湖南", num: 0.72 },
                ],
            },
            {
                value: "西南地区",
                children: [
                    { value: "重庆", num: 0.32 },
                    { value: "四川", num: 0.33 },
                    { value: "云南", num: 0.36 },
                    { value: "贵州", num: 0.36 },
                    { value: "西藏", num: 0.36 },
                ],
            },
            {
                value: "西北地区",
                children: [
                    { value: "陕西", num: 0.32 },
                    { value: "甘肃", num: 0.33 },
                    { value: "青海", num: 0.36 },
                    { value: "宁夏", num: 0.36 },
                    { value: "新疆", num: 0.36 },
                ],
            },
            {
                value: "东北地区",
                children: [
                    { value: "黑龙江", num: 0.32 },
                    { value: "吉林", num: 0.33 },
                    { value: "辽宁", num: 0.36 },
                ],
            },
        ];
        const dLength = baseData
            .map((item) => item.children.length)
            .reduce((n, m) => n + m); // x轴数据总长度，用于计算父级x轴的宽度
        let xData = [];
        let yData = [];
        let series = [
            {
                data: yData,
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#555",
                    },
                },
                itemStyle: {
                    color: (params) => {
                        return colorBg(params.dataIndex);
                    },
                },
                xAxisIndex: 0,
                yAxisIndex: 0,
            },
        ];
        let baseObj = {
            data: [
                {
                    name: "",
                    value: 1,
                },
            ],
            label: {
                show: true,
                position: "inside",
                formatter: "{b}",
                offset: [0, 10],
                textStyle: {
                    color: "#666",
                },
            },
            type: "bar",
            barGap: 0,
            barWidth: "",
            itemStyle: {
                color: "",
                opacity: 0.8,
            },
            animationEasing: "bounceOut",
            xAxisIndex: 1,
            yAxisIndex: 1,
        };
        baseData.forEach((item, index) => {
            let pObj = JSON.parse(JSON.stringify(baseObj));
            pObj.data[0].name = item.value;
            pObj.barWidth = (item.children.length / dLength) * 100 + "%";
            pObj.itemStyle.color = colorBg(index);
            series.push(pObj);
            item.children.forEach((cItem) => {
                xData.push({
                    value: cItem.value,
                    pName: item.value,
                });
                yData.push(cItem.num);
            });
        });

        function colorBg(index) {
            const colors = [
                "#4150d8",
                "#28bf7e",
                "#ed7c2f",
                "#f2a93b",
                "#f9cf36",
                "#4a5bdc",
                "#4cd698",
                "#f4914e",
                "#fcb75b",
                "#ffe180",
                "#b6c2ff",
                "#96edc1",
                "#4150d8",
                "#28bf7e",
                "#ed7c2f",
                "#f2a93b",
                "#f9cf36",
                "#4a5bdc",
                "#4cd698",
                "#f4914e",
                "#fcb75b",
                "#ffe180",
                "#b6c2ff",
                "#96edc1",
                "#4150d8",
                "#28bf7e",
                "#ed7c2f",
                "#f2a93b",
                "#f9cf36",
                "#4a5bdc",
                "#4cd698",
                "#f4914e",
                "#fcb75b",
                "#ffe180",
            ];
            return colors[index];
        }
        myChart1.setOption({
            title: {
                text: '各地区疾控中心达标指数',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '0%',
                left: '10%',
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            grid: [
                {
                    top: 50,
                    bottom: 111,
                  
                },
                {
                    height: 60,
                    bottom: 50,
                    tooltip: { show: false },
                },
            ],
            dataZoom: {
                type: "slider",
            },
            xAxis: [
                {
                    type: "category",
                    data: xData,
                    gridIndex: 0,
                    axisLabel: {
                        color: "white",
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#e7e7e7",
                        },
                    },
                    axisTick: {
                        lineStyle: {
                            color: "#e7e7e7",
                        },
                    },
                    zlevel: 2,
                },
                {
                    type: "category",
                    gridIndex: 1,
                    axisLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    zlevel: 1,
                },
            ],
            yAxis: [
                {
                    type: "value",
                    gridIndex: 0,
                    axisLabel: {
                        color: "white",
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#ccc",
                        },
                    },
                    axisTick: {
                        lineStyle: {
                            color: "#ccc",
                        },
                    },
                },
                {
                    type: "value",
                    gridIndex: 1,
                    axisLabel: { show: false },
                    axisLine: { show: false },
                    splitLine: { show: false },
                    axisTick: { show: false },
                },
            ],
            series,
        });
        //dataZoom缩放事件
        myChart1.on("dataZoom", (params) => {
            console.log(params);
            const dataZoom = myChart1.getModel().option.dataZoom[0];
            const { startValue, endValue } = dataZoom;
            let curXdata = xData.slice(startValue, endValue + 1); // 缩放后的子级
            let curPdata = [...new Set(curXdata.map((item) => item.pName))]; // 取出父级去重
            series.length = 1; //
            curPdata.forEach((item, index) => {
                let length = 0;
                curXdata.forEach((cItem) => {
                    if (cItem.pName === item) {
                        length++;
                    }
                });
                let pObj = JSON.parse(JSON.stringify(baseObj));
                pObj.data[0].name = item;
                pObj.barWidth = (length / curXdata.length) * 100 + "%";
                pObj.itemStyle.color = colorBg(index);
                series.push(pObj);
            });
            myChart1.setOption(
                {
                    series,
                },
                {
                    replaceMerge: "series", // 替换合并series，默认普通合并
                }
            );
        });

        //2022年传染感染科医院综合排行榜
        var myChart2 = echarts.init(document.getElementById("main2"));
        var option2 = {
            title: {
                text: '2022年传染感染科医院综合排行榜',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '0%',
                left: '10%',
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            grid: {
                left: "2%",
                right: "4%",
                bottom: "14%",
                top: "16%",
                containLabel: true,
            },
            legend: {
                data: ["声誉标化值", "科研标化值", "综合得分"],
                right: 10,
                top: 12,
                textStyle: {
                    color: "#fff",
                },
                itemWidth: 12,
                itemHeight: 10,
                // itemGap: 35
            },
            xAxis: {
                type: "category",
                data: [
                    '复旦大学附属华山医院',
                    '浙江大学医学院附属第一医院',
                    '南方医科大学南方医院',
                    '中国医学科学院北京协和医院',
                    '四川大学华西医院',
                    '上海交通大学医学院附属瑞金医院',
                    '中国人民解放军总医院',
                    '华中科技大学同济医学院附属同济医院',
                    '北京大学第一医院',
                    '首都医科大学附属北京佑安医院'
                ],
                axisLine: {
                    lineStyle: {
                        color: "white",
                    },
                },
                axisLabel: {
                    // interval: 0,
                    // rotate: 40,
                    textStyle: {
                        fontFamily: "Microsoft YaHei",
                    },
                },
            },

            yAxis: {
                type: "value",
                max: "100",
                interval: 20, // 设置刻度值的间隔为 20
                
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "white",
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,0.3)",
                    },
                },
                axisLabel: {},
            },
            dataZoom: [
                {
                    show: true,
                    height: 12,
                    xAxisIndex: [0],
                    bottom: "8%",
                    start: 10,
                    end: 90,
                    handleIcon:
                        "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                    handleSize: "110%",
                    handleStyle: {
                        color: "#d3dee5",
                    },
                    textStyle: {
                        color: "#fff",
                    },
                    borderColor: "#90979c",
                },
                {
                    type: "inside",
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35,
                },
            ],
            series: [
                {
                    name: "声誉标化值",
                    type: "bar",
                    barWidth: "15%",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#fccb05",
                                },
                                {
                                    offset: 1,
                                    color: "#f5804d",
                                },
                            ]),
                            barBorderRadius: 12,
                        },
                    },
                    data: [
                        80, 66.67, 53.33, 60, 40, 46.67, 33.33, 26.67, 20, 6
                    ],
                },
                {
                    name: "科研标化值",
                    type: "bar",
                    barWidth: "15%",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#8bd46e",
                                },
                                {
                                    offset: 1,
                                    color: "#09bcb7",
                                },
                            ]),
                            barBorderRadius: 11,
                        },
                    },
                    data: [
                        8.33, 20, 15, 3.33, 11.67, 3.33, 13.33, 3.33, 3.33, 16.67
                    ],
                },
                {
                    name: "综合得分",
                    type: "bar",
                    barWidth: "15%",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#248ff7",
                                },
                                {
                                    offset: 1,
                                    color: "#6851f1",
                                },
                            ]),
                            barBorderRadius: 11,
                        },
                    },
                    data: [
                        88.33, 86.67, 68.33, 63.33, 51.67, 50, 46.66, 30, 23.33, 22.67
                    ],
                },
            ],
        };
        var app = {
            currentIndex: -1,
        };
        setInterval(function () {
            var dataLen = option2.series[0].data.length;

            // 取消之前高亮的图形
            myChart2.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: app.currentIndex,
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            //console.log(app.currentIndex);
            // 高亮当前图形
            myChart2.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: app.currentIndex,
            });
            // 显示 tooltip
            myChart2.dispatchAction({
                type: "showTip",
                seriesIndex: 0,
                dataIndex: app.currentIndex,
            });
        }, 1000);
        myChart2.setOption(option2);
        //2022年传染感染科提名医院
        var myChart3 = echarts.init(document.getElementById("main3"));
        var option3 = {
            title: {
                text: '2022年传染感染科提名医院',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '0%',
                left: '10%',
            },
            backgroundColor: 'transparent',
            tooltip: {},
            color: ['white', 'white', 'white'],
            series: [{
                type: 'graph',
                layout: 'force',
                force: {
                    repulsion: 200,
                    edgeLength: 5
                },
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                data: [{
                    "name": "首都医科大学附属北京地坛医院",
                    "value": 10000,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(27, 94, 93)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(27, 94, 93)",
                            "color": "rgb(27, 94, 93)"
                        }
                    }
                }, {
                    "name": "首都医科大学附属北京佑安医院",
                    "value": 6181,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(206, 188, 11)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(206, 188, 11)",
                            "color": "rgb(206, 188, 11)"
                        }
                    }
                }, {
                    "name": "华中科技大学同济医学院附属协和医院",
                    "value": 4386,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(165, 190, 198)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(165, 190, 198)",
                            "color": "rgb(165, 190, 198)"
                        }
                    }
                }, {
                    "name": "重庆医科大学附属第二医院",
                    "value": 4055,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(98, 41, 72)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(98, 41, 72)",
                            "color": "rgb(98, 41, 72)"
                        }
                    }
                }, {
                    "name": "吉林大学第一医院",
                    "value": 2467,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(175, 20, 143)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(175, 20, 143)",
                            "color": "rgb(175, 20, 143)"
                        }
                    }
                }, {
                    "name": "西安交通大学第一附属医院",
                    "value": 2244,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(77, 231, 55)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(77, 231, 55)",
                            "color": "rgb(77, 231, 55)"
                        }
                    }
                }, {
                    "name": "安徽医科大学第一附属医院",
                    "value": 1898,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(26, 83, 246)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(26, 83, 246)",
                            "color": "rgb(26, 83, 246)"
                        }
                    }
                }, {
                    "name": "中南大学湘雅医院",
                    "value": 1484,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(155, 118, 127)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(155, 118, 127)",
                            "color": "rgb(155, 118, 127)"
                        }
                    }
                }, {
                    "name": "上海市（复旦大学附属）公共卫生临床中心",
                    "value": 1112,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(116, 207, 18)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(116, 207, 18)",
                            "color": "rgb(116, 207, 18)"
                        }
                    }
                }, {
                    "name": "重庆医科大学附属第一医院",
                    "value": 965,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(98, 224, 224)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(98, 224, 224)",
                            "color": "rgb(98, 224, 224)"
                        }
                    }
                }, {
                    "name": "陆军军医大学第一附属医院",
                    "value": 847,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }, {
                    "name": "北京大学人民医院",
                    "value": 847,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }, {
                    "name": "深圳市第三人民医院",
                    "value": 847,
                    "symbolSize": 80,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "borderColor": "rgb(137, 37, 21)",
                            "borderWidth": 4,
                            "shadowBlur": 100,
                            "shadowColor": "rgb(137, 37, 21)",
                            "color": "rgb(137, 37, 21)"
                        }
                    }
                }]
            }]
        };
        myChart3.setOption(option3);
        myChart3.on('click',params => {
            for(let i = 0;i<9;i++){
                if(this.hosp[i].name ===params.data.name){
                    this.showhosp = this.hosp[i]
                }
            }
        })
    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#container {
    background: url("../../../public/image/bg.jpg") repeat top center;
    line-height: 1.15;
    width: 100%;
    height: 1080px;
    padding-top: 60px;
}

h1 {
    margin-top: 8px;
    height: 49px;
    /* 调节文字的高度，增加行高 */
    text-align: center;
    color: aliceblue;
}

.mainbox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 950px;
    max-height: 1080px;
    margin: 0 auto;
    padding: 0.125rem 0.125rem 0;
}

.mainbox .row {
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 100%;
    flex: 3;
}
.row2{
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    height: 460px;
    width: 100%;
}

.mainbox .panel {
    width: 600px;
    position: relative;
    height: 600px;
    padding: 0 0.1875rem 0.5rem;
    margin-bottom: 0.1875rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url("../../../public/image/line.png") rgba(255, 255, 255, 0.03);
}

.mainbox .bar {
    width: 600px;
    height: 460px;
}

.mainbox:nth-child(1) .panel {
    width: 900px;
    height: 600px;
}

.mainbox .panel::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
}

.mainbox .panel::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
}

.mainbox .panel .panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.mainbox .panel .panel-footer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
    content: "";
}

.mainbox .panel .panel-footer::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
    content: "";
}
.mainbox .bar2 {
    width: 900px;
    height: 500px;
}
.mainbox .line2 {
    width: 900px;
    height: 500px;
}
.mainbox .bar2 .chart {
    height: 600px;
    width: 900px;
    z-index: 10;
}

.mainbox .line2 .chart {
    width: 900px;
    height: 600px;
}

.map1 {
    font: 30px white solid;
    color: rgb(248, 252, 1);
    text-align: center;
    position: absolute;
    left: 55%;
    top: 35%;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    background: url("../../../public/image/map.png");
    background-size: 100% 100%;
    opacity: 0.3;
}

.map2 {
    position: absolute;
    top: 35%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: url("../../../public/image/lbx.png");
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
    z-index: 10;
}

.map3 {
    position: absolute;
    top: 35%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 650px;
    background-image: url("../../../public/image/jt.png");
    background-size: 100% 100%;
    animation: rotate2 15s linear infinite;
}

#main0 {
    width: 600px;
    height: 460px;
}

#main1 {
    width: 900px;
    height: 500px;
}

#main2 {
    width: 900px;
    height: 500px;
}

#main3 {
    width: 600px;
    height: 460px;
    z-index: 10;
}

#word {
    width: 600px;
    height: 460px;
    overflow: auto;
    color: white;
    font-size: 25px;
}
.iconfont {
    font-size: 40px;
    color: antiquewhite;
}
.text {
    text-indent: 2em;
}
@keyframes rotate1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate2 {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
</style>